<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>会员列表-新浪新闻-后台管理系统-1.0</title>
	<meta name="renderer" content="webkit" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<link rel="stylesheet" href="../../static/css/font.css" />
	<link rel="stylesheet" href="../../static/css/weadmin.css" />
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
</head>

<body>


	<div class="weadmin-body">
		<div class="layui-row">
			<div class="layui-form layui-col-md12 we-search">
				注册开始日期
				<div class="layui-inline">
					<input class="layui-input" placeholder="请选择" name="start" id="start" />
				</div>
				注册结束如期
				<div class="layui-inline">
					<input class="layui-input" placeholder="请选择" name="end" id="end" />
				</div>
				用户名
				<div class="layui-inline">
					<input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" />
				</div>
				性别
				<div class="layui-input-inline">
					<select name="city">
						<option value="">请选择</option>
						<option value="0">女</option>
						<option value="1">男</option>
					</select>
				</div>
				<button class="layui-btn" lay-submit="" lay-filter="sreach">
					<i class="layui-icon layui-icon-search"></i>
				</button>
			</div>
		</div>
		<div class="weadmin-block">
			<!-- onclick="WeAdminShow('添加用户','./add.html',600,400)" -->
			<button class="layui-btn" id="addBtn">
				<i class="layui-icon layui-icon-add-circle-fine"></i>添加
			</button>
		</div>
		<table id="myTable" lay-filter="member"></table>
		<script type="text/html" id="bar">
			<div class="layui-clear-space">
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
			</div>
    	</script>
	</div>
	<!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
	<script src="../../lib/layui/layui.js" charset="utf-8"></script>
	<script src="../../static/js/eleDel.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use(['jquery', 'table'], function () {
			var table = layui.table;
			var $ = layui.$
			// 初始化表格
			init();
			onEventsAll()
			function init() {
				table.render({
					elem: '#myTable'
					, even: true
					, page: true
					, limit: 5
					, limits: [5, 10, 20, 30, 50, 100]
					, url: '../../json/table.json'
					, parseData: function (data) {
						return {
							"code": data.status, // 解析接口状态
							"msg": data.message, // 解析提示文本
							"count": data.total, // 解析数据长度
							"data": data.data.item // 解析数据列表
						}
					}
					, defaultToolbar: []
					, cols: [[ //表头
						{ field: 'id', title: 'id', width: 80, sort: true, fixed: 'left' }
						, { field: 'username', title: '用户名', width: 80 }
						, { field: 'email', title: '邮箱' }
						, { field: 'signature', title: '签名' }
						, {
							field: 'sex', title: '性别', width: 80,
							templet: function (data) {
								return data.sex == "1" ? `<span >男</span>` : `<span >女</span>`
							}
						}
						, { field: 'city', title: '城市', }
						, { field: 'integral', title: '积分', width: 80, sort: true }
						, { field: 'right', title: '操作', width: 100, minWidth: 125, toolbar: '#bar', fixed: 'right' }
					]]
				});
			}
			function onChangeTable(data) {
				layer.open({
					title: data ? '编辑' : '添加',
					type: 2,
					maxmin: true,
					// a.html?#/age=9/num=8
					content: data ? './add.html?#/id='+ data : './add.html',
					area: ['98%', '98%'],
					btn: [data ? '修改' : '确定', '取消'],
					btn1: function (index, layero) {
						layero.find('iframe').contents().find('#add').click();
					},
				});
			}
			function onEventsAll() {
				table.on('tool(member)', function (res) {
					if (res.event === 'edit') {
						onChangeTable(res.data.id);
					}
					if (res.event === 'delete') {
						layer.confirm('你确定要删除吗？', { icon: 3 }, function (index) {
							res.del();
							layer.close(index)
							// 正确逻辑是在此调用ajax
							/*
								ajax
								在ajax回调中弹窗
	
							*/
							layer.msg('删除成功', { icon: 1, time: 1000 });
						});
					}
				})
				$('#addBtn').on('click', function () {
					onChangeTable();
				})
			}

		})
		function submit(data) {
			// console.log(data);
			layer.closeAll();
			layer.msg(JSON.stringify(data));
		}
	</script>
</body>

</html>